
<template>
  <el-dialog title="订单信息" :visible.sync="state" @close="hide('form')">
    <el-form :model="form" :label-position="labelPosition" ref="form">
      <el-form-item
        label="预定场地："
        label-width="100px"
        prop="gymPreOrderInfoDTOList"
        ref="loadElement"
      >
        <el-row v-for="(n, i) of totallist" :key="i">
          <el-col :span="8"> 场地：{{ n.siteName }} </el-col>
          <el-col :span="8"> 时间：{{ n.start }}~{{ n.end }} </el-col>
          <el-col :span="8"> 费用：{{ n.price }} </el-col>
        </el-row>
      </el-form-item>
      <el-form-item
        label="订单金额："
        label-width="100px"
        prop="orderAmount"
        ref="loadElement"
      >
        <div>{{ total }}</div>
      </el-form-item>

      <el-form-item
        label="客户类型："
        label-width="100px"
        prop="anonymityFlag"
        ref="loadElement"
        :rules="{
          required: true,
          message: '请选择客户类型',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 40%"
          v-model="form.anonymityFlag"
          placeholder="请选择"
          @change="setAnonymityFlag"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label=""
        label-width="100px"
        prop="orderPhone"
        :rules="{
          required: true,
          message: '请输入手机号',
          trigger: 'blur',
        }"
        v-if="form.anonymityFlag == '1'"
      >
        <el-input
          style="width: 40%"
          v-model="form.orderPhone"
          placeholder="请输入手机号"
        ></el-input>
        <el-button type="primary" @click="memberquery">查询</el-button>
        <div v-if="memberlist" class="member">
          <span v-if="memberlist.memberName"
            >会员名：{{ memberlist.memberName }}</span
          >
          <span v-if="memberlist.phone">手机号：{{ memberlist.phone }}</span>
          <span v-if="memberlist.levelName"
            >会员等级：{{ memberlist.levelName }}</span
          >
          <span v-if="memberlist.rechargeBalance"
            >余额：{{ memberlist.rechargeBalance }}</span
          >
        </div>
      </el-form-item>

      <el-form-item
        label="客户手机号："
        label-width="100px"
        prop="orderPhone"
        ref="loadElement"
        :rules="{
          required: true,
          message: '请输入手机号',
          trigger: 'blur',
        }"
        v-if="form.anonymityFlag == '0'"
      >
        <el-input
          style="width: 40%"
          v-model="form.orderPhone"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="客户姓名："
        label-width="100px"
        prop="orderMemberName"
        ref="loadElement"
        v-if="form.anonymityFlag == '0'"
      >
        <el-input
          style="width: 40%"
          v-model="form.orderMemberName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="付款方式："
        label-width="100px"
        prop="payType"
        ref="loadElement"
        :rules="{
          required: true,
          message: '请选择付款方式',
          trigger: 'change',
        }"
        v-if="form.anonymityFlag"
      >
        <el-select
          style="width: 40%"
          v-model="form.payType"
          placeholder="请选择"
          @change="getPayType"
          :disabled="payTypeState"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.value == 4 && form.anonymityFlag == 0"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="备注："
        label-width="100px"
        prop="remark"
        ref="loadElement"
      >
        <el-input
          type="textarea"
          style="width: 40%"
          v-model="form.remark"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="hide('form')">取 消</el-button>
      <el-button type="primary" @click="confirm(1)">提交</el-button>
      <el-button type="primary" :disabled="subState" @click="confirm(2)"
        >确认付款</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { getMemberInfoByPhone, getCutPrice } from "@/config/api";
import { divide, plus, times, minus } from "@/utils/tools";
export default {
  props: {
    addVisible: {
      type: Boolean,
      default: false
    },
    totallist: {
      type: Array,
      default () {
        return [];
      }
    },
    total: {
      type: Number,
      default () {
        return 0;
      }
    },
    getAddPageData: {
      type: Function,
      default () {
        return null;
      }
    },
    getAddPageData1: {
      type: Function,
      default () {
        return null;
      }
    },
    gymProductId: {
      type: String,
      default: ""
    },
    preDate: {
      type: String,
      default: ""
    },
    regionId: {
      type: Number,
      default: null
    },
    gymProductName: {
      type: String,
      default: ""
    },
    gradeActiveList: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      options: [
        {
          value: "0",
          label: "散客"
        },
        {
          value: "1",
          label: "会员"
        }
      ],
      options1: [
        {
          value: "5",
          label: "现金"
        },
        {
          value: "2",
          label: "微信"
        },
        {
          value: "4",
          label: "余额",

        },
        {
          value: "3",
          label: "银联"
        },
        {
          value: "1",
          label: "支付宝"
        },
        {
          value: "7",
          label: "礼品卡"
        }
      ],
      labelPosition: "top",
      form: {
        platformMemberId: "", //会员ID
        platformMemberCardId: "", //会员卡ID
        platformCompanyId: 105, //平台集团ID
        platformStoreId: 2000042, //平台门店ID
        orderName: "", //订单名称
        productId: "", //项目ID
        activityReduction: "", //活动满减
        payType: "", //支付方式
        orderAmount: "", //订单金额
        orderPhone: "", //订单手机号
        payAmount: "", //实付金额
        couponIds: "", //优惠券ID
        preDate: "", //创建日期
        remark: "", //备注
        anonymityFlag: "", //匿名订单标识;0：散客 1：会员
        orderMemberName: "", //订单游客姓名
        sysUserId: "", //操作人Id
        gymPreOrderInfoDTOList: []
      },
      createTime: null,
      flag: false,
      rules: {
        anonymityFlag: [
          { required: true, message: "请选择客户类型", trigger: "change" }
        ],
        payType: [
          { required: true, message: "请选择付款方式", trigger: "change" }
        ],

      },
      tablelist: [],
      memberlist: null,
      money: 0,
      value: "",
      subState: false,
      payTypeState: true

    };
  },

  computed: {
    state: {
      get () {
        this.payTypeState = true
        return this.addVisible;
      },
      set () { }
    }
  },
  methods: {
    memberquery () {
      this.memberlist = {};
      getMemberInfoByPhone({ phone: this.form.orderPhone }).then(res => {
        if (res.data.status == 200) {
          res.data.result.rechargeBalance = divide(
            res.data.result.rechargeBalance,
            100
          );
          this.memberlist = res.data.result;
          this.payTypeState = false
        } else {
          this.memberlist = null
        }

      });
    },
    // 选择客户类型
    setAnonymityFlag (anonymityFlag) {
      if (anonymityFlag == 0) {
        this.payTypeState = false
      } else if (anonymityFlag == 1) {
        this.payTypeState = true
      }
      this.form.payType = ""
    },
    hide () {
      this.$nextTick(() => {
        this.memberlist = null
        this.$refs.form.resetFields();
        this.getAddPageData({ state: false, data: null });
      });
    },
    getPayType (e) {
      if (e == 7) {
        this.subState = true
      } else {
        this.subState = false
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let list = []
      this.gradeActiveList.map(i => {
        list.push({ regulationId: i.regulationId, bookId: i.bookId })
      })
      getCutPrice({ levelId: this.memberlist ? this.memberlist.gymLevel : '', bookList: list, payType: e }).then(res => {
        res.data.result.map(item => {
          this.totallist.map(i => {
            if (item.bookId == i.bookId) {
              i.price = divide(item.price, 100)
            }
          })
          let n = 0
          this.totallist.map(i => {
            n = plus(n, i.price)
          })
          console.log(n)
          this.$parent.setTotal(n)
          // this.total = n
        })

        loading.close();
      })
    },
    confirm (state) {
      if (this.form.anonymityFlag == '1' && this.memberlist == null) {
        this.$message.error("请查询会员信息");
        return false
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          let payAmount = 0
          if (this.form.payType == '4') {
            this.form.activityReduction = 0
            payAmount = this.total
          } else {
            this.form.activityReduction = 0
            payAmount = this.total
          }

          let obj = [];
          this.totallist.map(item => {
            obj.push({
              platformStoreId: 2000042,
              gymRegionId: this.regionId,
              gymSiteId: Number(item.siteId),
              price: times(item.price, 100),
              schemeId: Number(item.schemeId),
              gymItemId: Number(this.gymProductId),
              startTime: item.start,
              endTime: item.end,
              gymSiteRecordId: item.bookId
            });
          });
          let params = {
            platformMemberId: this.memberlist ? this.memberlist.platformMemberId : "",
            platformMemberCardId: this.memberlist ? Number(this.memberlist.platformMemberCardId) : "",
            platformCompanyId: 105,
            platformStoreId: 2000042,
            orderName: this.gymProductName,
            productId: this.gymProductId,
            anonymityFlag: "0",
            activityReduction: times(this.form.activityReduction, 100),
            payType: this.form.payType,
            orderAmount: times(this.total, 100),
            orderPhone: this.form.orderPhone,
            payAmount: times(payAmount, 100),
            couponIds: "",
            preDate: this.preDate,
            remark: this.form.remark,
            gymPreOrderInfoDTOList: obj,
            sysUserId: this.$store.state.login.userInfo.id,
            orderMemberName: this.form.orderMemberName
          };
          if (state == 1) {
            this.getAddPageData({ state: false, data: params });
          } else {
            this.getAddPageData1({ state: false, data: params });
          }
          this.memberlist = null
        } else {
          this.$message.error("请填写必要信息");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.text {
  display: flex;
  justify-content: space-around;
}
.member > span {
  color: #409eff;
  font-size: 12px;
  margin-right: 12px;
}
</style>
